<template>
  <div>
    <span>是否对物流满意({{ flag1 }})：</span>
    <MySwitch
      :size="20"
      :value="flag1"
      @update:value="flag1 = $event"
    ></MySwitch>
    <br />
    <span>是否对物品满意({{ flag2 }})：</span>
    <MySwitch :size="40" :value.sync="flag2"></MySwitch>
    <br />
    <span>是否对服务满意({{ flag3 }})：</span>
    <!--
      v-model 为组件绑定双向功能时，会完成如下两个操作
        1. 绑定属性 value  等同于  v-bind:value
        2. 绑定事件 update:value  等同于  v-on:update:value
      子组件中必须通过 model 配置明确指定用于 组件v-model的属性名和事件名
      model: {
        prop: "value",
        event: "update:value",
      },
    -->
    <MySwitch :size="60" v-model="flag3"></MySwitch>
    <hr />
    {{ num1 }} <MyInput v-model="num1" :rand="[0, 10]" :step="1"></MyInput>
    <br />
    {{ num2 }} <MyInput v-model="num2" :rand="[0, 20]" :step="2"></MyInput>
    <br />
    {{ num3 }} <MyInput v-model="num3" :rand="[-10, 30]" :step="0.5"></MyInput>
    <br />
  </div>
</template>

<script>
import MySwitch from "./MySwitch.vue";
import MyInput from "./MyInput.vue";
export default {
  components: {
    MySwitch,
    MyInput,
  },
  data() {
    return {
      flag1: false,
      flag2: true,
      flag3: false,
      num1: 10,
      num2: 20,
      num3: 30,
    };
  },
};
</script>
